import { defineComponent, watch, shallowReactive, onMounted, ref } from 'vue'
import { getTimeStamp, record, realtimeApi } from '../../../apis/exampleApi'
import request from '../../../utils/request'

// 声明类型
const PropsType = {
	ph: {
		type: Number,
		default: 7,
		require: true,
	},
} as const

// 定义主体
export default defineComponent({
	props: PropsType,
	setup(props) {
		// 配置项
		let options: any
		const chartRef = ref()

		watch(
			() => props.ph,
			(val: any) => {
				options = {
					series: [
						{
							type: 'gauge',
							center: ['50%', '60%'],
							startAngle: 200,
							endAngle: -20,
							min: 0,
							max: 14,
							splitNumber: 7,
							itemStyle: {
								color: '#59d9e8',
							},
							progress: {
								show: true,
								width: 15,
							},
							pointer: {
								show: false,
							},
							axisLine: {
								lineStyle: {
									width: 15,
								},
							},
							axisTick: {
								distance: -45,
								splitNumber: 5,
								lineStyle: {
									width: 2,
									color: '#999',
								},
							},
							splitLine: {
								distance: -52,
								length: 14,
								lineStyle: {
									width: 3,
									color: '#999',
								},
							},
							axisLabel: {
								distance: -20,
								color: '#999',
								fontSize: 18,
							},
							anchor: {
								show: false,
							},
							title: {
								show: true,
								offsetCenter: [0, '50%'], //相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
								color: '#fff', // 文字的颜色,默认 #333。
								fontSize: 25, // 文字的字体大小,默认 15。
							},
							detail: {
								valueAnimation: true,
								width: '50%',
								lineHeight: 40,
								borderRadius: 8,
								offsetCenter: [0, '-10%'],
								fontSize: 45,
								fontWeight: 'bolder',
								formatter: '{value} ph',
								color: '#3bdec1',
							},
							data: [
								{
									value: props.ph,
									name: 'PH/ph',
								},
							],
						},
						,
						{
							type: 'gauge',
							center: ['50%', '60%'],
							startAngle: 200,
							endAngle: -20,
							min: 0,
							max: 14,
							itemStyle: {
								color: '#fb7293',
							},
							progress: {
								show: true,
								width: 5,
							},
							pointer: {
								show: false,
							},
							axisLine: {
								show: false,
							},
							axisTick: {
								show: false,
							},
							splitLine: {
								show: false,
							},
							axisLabel: {
								show: false,
							},
							detail: {
								show: false,
							},
							data: [
								{
									value: props.ph,
								},
							],
						},
					],
				}
				// 手动触发更新
				if (chartRef.value) {
					// 通过初始化参数打入数据
					chartRef.value.initChart(options)
				}
			},
			{
				immediate: true,
				deep: true,
			}
		)

		return () => {
			const height = '290px'
			const width = '330px'

			return (
				<div style='display:flex;justify-content:center;align-items:center;'>
					<echart
						ref={chartRef}
						options={options}
						height={height}
						width={width}
					/>
				</div>
			)
		}
	},
})
